微信小程序数据使用

撰写时间： 2019-11-06 总共： 1814 字 转载请注明： BY-SA 4.0（除特别声明或转载文章外）

本地模拟json格式数据

由于读取json文件有点麻烦，直接当作一个变量来使用吧。

将我的json文件转为一个js模块

module.exports = {
  "RECORDS": [{
    "rank": "282.0",
    "word": "stand",
    "pos": "v",
    "collins": "5.0",
    "tags": "toefl ielts zk gk",
    "definition": "vi. 位于；站立；停滞"
  },
  {
    "rank": "283.0",
    "word": "bad",
    "pos": "j",
    "collins": "5.0",
    "tags": "zk gk",
    "definition": "adj. 坏的；严重的；劣质的"
  },
  {
    "rank": "284.0",
    "word": "lose",
    "pos": "v",
    "collins": "5.0",
    "tags": "cet4 cet6 ky zk gk",
    "definition": "vt. 使沉溺于；浪费；遗失；使迷路；错过"
  }
 ]

在index.js里引用然后进行使用

import json from '../../assets/data/coca.js';

紧接着就是根据指定的page和pageSize进行分页的模拟获取

// index.js
Page({
   	// 初始数据
  data: {
    // coca words data
    page:1,
    pageSize:10,
    cocas:[]
  },
  onLoad: function () {
    this.getCocas()
  },
  // 分页函数
  p(data,page=1, pageSize=10) {
    let _t = data.slice( (page-1) * pageSize , page * pageSize + pageSize)
    console.log(_t)
    return _t
  },
  // 获取下一页  
  nextClick(){
    let records = json["RECORDS"]
    let {page} = this.data;
    this.setData({
      page:++page,
    })
    return this.getCocas()
  },
  // 获取当前页数据  
  getCocas(){
      let records = json["RECORDS"];
      this.setData({
      	cocas: this.p(records,this.data.page, this.data.pageSize)
    })
  }  
})

基本实现数据的分页获取

云数据库的使用

开启云开发，进入云开发平台建立数据库集合

此时记得分配集合的权限，否则会在获取数据时返回空数组。

//index.js
//获取应用实例
const app = getApp();


// 引用数据库
const db = wx.cloud.database()
// 引用集合
const zeez = db.collection('zeez')

Page({
  data: {
    // coca words data
    page:1,
    pageSize:10,
    cocas:[],
    total:0
  },
  onLoad: function () {
    this.getCocas()
  },
  // 云数据库
  getCocas(){
    // 获取数据
    // 获取总数
    zeez.count().then(res=>{
      this.setData({
        total:Math.ceil( res.total / this.data.pageSize)
      })
    }).catch(err=>{
      console.log(err)
    })
    zeez.skip(
      (this.data.page-1)*this.data.pageSize
      ).limit(this.data.pageSize).get().then(res => {
      console.log(res.data)
      // 最多一次20个 
      this.setData({
        cocas: res.data
      })
    }).catch(err=>{
      console.log(err)
    })
  },
  // 获取下一页  
  nextClick() {
    let { page } = this.data;
    this.setData({
      page: ++page,
    })
    return this.getCocas()
  },
  prevClick(){
    let { page } = this.data;
    if(page!==1){
      this.setData({
        page: --page,
      })
    }
    return this.getCocas()
  }
})

基本上这就完结了一个分页获取的步骤。后续也可以将逻辑抽出到云函数部分。

后续会完善这个项目。

奖励一下